<template>
  <div>
      <el-form :inline="true">
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入用户名、联系方式、备注模糊查询订单" style="width: 400px;"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="page()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-upload
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :disabled="importDisabled"
                        style="display: inline-flex;margin-right: 10px;"
                        action="http://39.99.160.25:8088/orders/web/importOrdersExcel"
                        name="userFiles"
                        >
                    <el-button size="small" :disabled="importDisabled" type="success" :icon="importDataIcon">
                       {{importDataText}}
                    </el-button>
                </el-upload>

       <el-table
    :data="ordersList"
    style="width: 100%"
    >
    <el-table-column
      fixed
      prop="id"
      label="主键id"
      width="80">
    </el-table-column>
    <el-table-column
      prop="user_identity_id"
      label="发布员学号/工号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="orderNum"
      label="订单编号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注"
      width="100">
    </el-table-column>
    <el-table-column
      prop="order_status"
      label="订单状态"
      width="150">
    </el-table-column>
    
    <el-table-column
      prop="orderType_price"
      label="订单价格"
      width="80">
    </el-table-column>
     <el-table-column
      prop="user_name"
      label="用户名"
      width="100">
    </el-table-column>
     <el-table-column
      prop="phone"
      label="联系方式"
      width="100">
    </el-table-column>
    <el-table-column
      prop="sender_id"
      label="接单员学号/工号"
      width="100">
    </el-table-column>
    <el-table-column 
    prop="order_time"
    label="下单时间"
    width="100">
    </el-table-column>
    <el-table-column 
    prop="end_time"
    label="订单完成时间"
    width="100">
    </el-table-column>
    <el-table-column 
    prop="sign_time"
    label="订单失效时间"
    width="100">
    </el-table-column>
    <el-table-column 
    prop="expressWeightType"
    label="订单重量类型"
    width="100">
    </el-table-column>
    <el-table-column 
    prop="expressCompanyType"
    label="取件地址"
    width="100">
    </el-table-column>
    <el-table-column 
    prop="serviceAddress"
    label="送达地址"
    width="100">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
  
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete( scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <el-pagination
  background
  layout="prev, pager, next"
  :page-size="pageSize"
  :total="totalCount"
  @current-change="page">
</el-pagination> -->
  </div>
 
</template>

<script>
  export default {
      methods:{
        //搜索框输入搜索
    page() {
      const _this = this;
      //var arr = [];
      axios({
        url:
          "http://39.99.160.25:8088/orders/web/selectOrderByKeyWord?keyWord=" +this.keyword,
        method: "get",
        headers:
        {
          "Authorization":　sessionStorage.getItem("token")
        }
      }).then(function(res) {
        console.log(res)
        _this.ordersList = res.data.data.orders;
       
      });
    },

    resetData() {
      //清空的方法
      //表单输入项数据清空
      this.input = {};
      // this.page()
      this.selectall();
    },
          
       exportExcel() {
    

      axios({
        url: "http://39.99.160.25:8088/orders/web/exportOrdersExcel",
        method: "post",
      

        responseType: "blob"
      }).then(function(res) {
       
        console.log(res);
      
        let url = window.URL.createObjectURL(new Blob([res.data])); //转换为可用URl地址
        let link = document.createElement("a"); //创建a标签
        link.style.display = "none"; //使之不可见
        link.href = url; //赋URL地址
        //link.setAttribute("download", res.data.fileName+'.xls'); //设置下载属性、以及文件名
        link.setAttribute("download", "订单列表导出" + ".xls");
        document.body.appendChild(link); //将a标签插至页面中
        link.click(); //强制触发a标签事件
      });
    },
      handleDelete( row) {
        const _this=this
        // var qs=require('qs')
        // console.log(row.identity_id)
        console.log(row.id)
        axios({
            method:"delete",
            url:"http://39.99.160.25:8088/users/web/delete?id="+row.id,
           // data:qs.stringify({}),
            headers:
            {
              "Authorization":sessionStorage.getItem("token")
            }
            
        }).then(function (resp){
          if(resp.data.data.msg=='删除数据成功'){
            console.log(resp)
              _this.$alert('《'+row.id+'》删除成功！', '消息',{
                confirmButtonText: '确定',
                 callback: action =>{
                    //  _this.$router.push({
                    //     path:'/orders'
                    // })
                     window.location.reload();
                 }
              })
          }  

        });
      },
      onError() {
                this.importDataText = '导入数据';
                this.importDataIcon = 'el-icon-upload2';
                this.importDisabled = false;
               // this.initEmps();
                this.$message.success("导入失败！");
            },
            // 导入文件成功后回调
            onSuccess() {
              // 成功后文本修改为原来的导入数据
                this.importDataText = '导入数据';
                // 图标修改
                this.importDataIcon = 'el-icon-upload2';
                // 将上传组件改为允许使用
                this.importDisabled = false;
                // 调用刷新数据的方法
                 this.selectall();
                //this.initEmps();
                // message 弹出消息
                this.$message.success("导入成功！");
            },
            // 上传文件调用
            beforeUpload() {
              // axios({
              //   url:'',
              //   method:'post',

              // }).then(function(res){

              // })
              // 将文本修改为正在导入
                this.importDataText = '正在导入';
                // 修改其图标
                this.importDataIcon = 'el-icon-loading';
                // 将其上传组件暂时禁用
                this.importDisabled = true;
            },
         selectall(){
               const _this=this
         
        axios({
            method:"get",
            url:"http://39.99.160.25:8088/orders/wx/selectAllOrders",
            data:{},
            headers:
            {
              "Authorization":sessionStorage.getItem("token")
            }
            
        }).then(function (resp){
            console.log(resp)
     
            _this.ordersList=resp.data.data.orders
         
          
        })
            }
      },
    data() {
      return {
        importDataText: '导入数据',
    // 导入按钮的图标
    importDataIcon: 'el-icon-upload2',
    // 导入按钮是否被禁用
    importDisabled: false,
    
         input:'',
         keyword:'',
        ordersList: [
        {
          id: '1',
          user_identity_id: '111',
          orderNum: '111',
          remark: '111',
          order_status: '111',
          orderType_price: "222",
          user_name:'111',
          phone:'111',
          sender_id:'111',
          order_time:'111',
          end_time:'111',
          sign_time:'111',
          expressWeightType:'111',
          expressCompanyType:'111',
          serviceAddress:'111',
        
        },
         {
          id: '2',
          user_identity_id: '222',
          orderNum: '222',
          remark: '222',
          order_status: '222',
          orderType_price: "222",
          user_name:'222',
          phone:'222',
          sender_id:'222',
          order_time:'222',
          end_time:'222',
          sign_time:'222',
          expressWeightType:'222',
          expressCompanyType:'222',
          serviceAddress:'222',
        
        
        },
         {
          id: '3',
          user_identity_id: '333',
          orderNum: '333',
          remark: '333',
          order_status: '333',
          orderType_price: "333",
          user_name:'333',
          phone:'333',
          sender_id:'333',
          order_time:'333',
          end_time:'333',
          sign_time:'333',
          expressWeightType:'333',
          expressCompanyType:'333',
          serviceAddress:'333',
        
        },
         {
          id: '4',
          user_identity_id: '444',
          orderNum: '444',
          remark: '444',
          order_status: '444',
          orderType_price: "444",
          user_name:'444',
          phone:'444',
          sender_id:'444',
          order_time:'444',
          end_time:'444',
          sign_time:'444',
          expressWeightType:'444',
          expressCompanyType:'444',
          serviceAddress:'444',
        
        },
         {
          id: '5',
          user_identity_id: '555',
          orderNum: '555',
          remark: '555',
          order_status: '555',
          orderType_price: "55",
          user_name:'555',
          phone:'555',
          sender_id:'555',
          order_time:'555',
          end_time:'555',
          sign_time:'555',
          expressWeightType:'555',
          expressCompanyType:'555',
          serviceAddress:'555',
        },
       
        ]
      }
    },
    created(){
       this.selectall()
    }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>